<template>
  <div class="friend">
    <!-- top -->
    <TopView name="friend" title="友人帐" msg="有你在的地方，天气明朗，万物可爱"></TopView>

    <div class="friend-wrap">
      <div class="rules">
        <h1>规则须知</h1>
        <div class="detail">
          <h3>网站要求</h3>
          <p>1.无色情内容，无政治敏感内容，网站要能长期正常访问</p>
          <p>2.二十篇以上个人原创文章，两个月内有新文章更新</p>
          <p>3.原创博客、技术博客、游记博客优先</p>
          <p>4.需要交换友链，先把本站添加到你的网站中，然后根据下面的格式，给我发email或在留言板给我留言~</p>
          <h3>申请格式</h3>
          <p>1.博客标题：巨蟹座不吃鱼</p>
          <p>2.博客地址：http://81.68.131.6:8140/</p>
          <p>3.图片地址：https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/qq5.jpg</p>
        </div>
      </div>

      <div class="list">
        <el-row :gutter="40">
          <el-col v-for="item in friendList" :key="item.id" :span="6" style="margin-bottom: 20px">
            <a :href="item.blogaddress" target="_blank">
              <el-card :body-style="{ padding: '0px' }">
                <el-image :src="item.pictureaddress" lazy fit="cover" />
                <div class="title">{{ item.blogname }}</div>
              </el-card>
            </a>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import friendApi from '@/api/friend.js'
export default {
  name: 'FriendView',
  components: {
    TopView
  },
  data() {
    return {
      friendList: []
    }
  },
  created() {
    this.getFriendList()
  },
  methods: {
    getFriendList() {
      friendApi.getFriends().then(res => {
        if (res.code === 20000) {
          this.friendList = res.data.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.friend {
  height: 100%;
  width: 100%;

  .friend-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -60px;
    left: 0;

    .rules {
      width: 80%;
      height: auto;
      margin: 0 auto;
      border-radius: 5px;
      text-align: center;
      background-color: #fff;
      margin-bottom: 30px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      h1 {
        background: #15af7b;
        color: #fff;
        padding: 10px 0;
        border-radius: 5px 5px 0 0;
        box-sizing: border-box;
      }
      .detail {
        text-align: left;
        padding: 20px 80px;
        box-sizing: border-box;

        h3 {
          margin: 20px 0;
        }
        p {
          padding-left: 20px;
          line-height: 30px;
        }
      }
    }

    .list {
      width: 80%;
      height: auto;
      margin: 0 auto;
      padding: 40px 40px 20px 40px;
      box-sizing: border-box;
      border-radius: 5px;
      margin-bottom: 50px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      .el-image {
        width: 100%;
        height: 250px;
        position: relative;
        vertical-align: middle;
        max-width: 100%;
      }
      .title {
        padding: 10px;
        font-weight: bold;
        background-color: #0bbd87;
        color: #fff;
      }
    }
  }
}
</style>
